import React, { Component } from 'react'
import { withRouter } from 'react-router-dom'
import * as ReactMarkdown from 'react-markdown'
import { connect } from 'react-redux'
import { BLOGVALUECHANGE, DELETEBLOG } from '@/store/actionType'
import { Table, Button, Modal } from 'antd'
import { deleteReq } from '@/utils/request'
// import { Resizable } from 'react-resizable';
import { FormOutlined, PlaySquareOutlined, DeleteOutlined, ExclamationCircleOutlined } from '@ant-design/icons'
const { confirm } = Modal
const mapDispatchToProps = (dispatch, ownProps) => {
  return {
    getValue: (payload) => {
      dispatch({ type: BLOGVALUECHANGE, payload })
    },
    deleteBlog: (payload) => {
      dispatch({ type: DELETEBLOG, payload })
    }
  }
}
@withRouter
@connect(null, mapDispatchToProps)
// 事件action和分页
class One extends Component {
  constructor(props) {
    super(props)
    this.state = {
      columns: [
        {
          title: '时间',
          key: 'formatTime',
          dataIndex: 'formatTime',
          ellipsis: true,
        },
        {
          title: '标题',
          key: 'title',
          dataIndex: 'title',
          ellipsis: true,
        },
        {
          title: '操作',
          dataIndex: '',
          key: 'action',
          render: (record) => <span >
            <Button size="small" type="primary" shape="circle" icon={<PlaySquareOutlined />} onClick={() => this.actionFunc('preview', record)} />&nbsp;
            <Button size="small" type="primary" shape="circle" icon={<FormOutlined />} onClick={() => this.actionFunc('modify', record)} />&nbsp;
            <Button size="small" type="primary" shape="circle" icon={<DeleteOutlined />} onClick={() => this.actionFunc('delete', record)} />
          </span>,
          // ellipsis: true,//不省略
        }
      ],
      modal1Visible: false,
      modalText: ''
    }
  }
  render() {
    const { List } = this.props
    const { columns, modalText, modal1Visible } = this.state
    return (
      <div>
        <Table
          pagination={{
            hideOnSinglePage: true,
            pageSize: 5
          }}
          columns={columns}
          dataSource={List}
          size="middle"
          rowKey={(record) => {
            return record._id
          }}
          expandable={{
            expandedRowRender: record => <ReactMarkdown
              source={record.text.substr(0, 50)}
            // 如果您处于受信任的环境中，并且想解析和呈现HTML，则需要使用该html-parser插件。对于默认配置，请导入react-markdown/with-html而不是默认值：
            // escapeHtml={false}
            />,
            // 是否可以展开
            rowExpandable: record => record.text.length > 50,
          }}
        />
        <Modal
          visible={modal1Visible}
          centered={true}
          // 关闭时销毁 Modal 里的子元素
          destroyOnClose={true}
          // onOk={this.handleOk}
          onCancel={() => this.setState({ modal1Visible: false, modalText: '' })}
          footer={[]}
        >
          {/* 预览md解析器 */}
          <ReactMarkdown
            source={modalText}
          // 如果您处于受信任的环境中，并且想解析和呈现HTML，则需要使用该html-parser插件。对于默认配置，请导入react-markdown/with-html而不是默认值：
          // escapeHtml={false}
          />
        </Modal>
      </div>
    )
  }
  actionFunc = (word, record) => {
    const { _id: id, text, title } = record
    switch (word) {
      case 'preview':
        this.setState({ modal1Visible: true, modalText: text })
        break;
      case 'modify':
        this.props.getValue(text)
        this.props.history.push('/pub', id)
        break;
      case 'delete':
        confirm({
          title: '确认删除?',
          icon: <ExclamationCircleOutlined />,
          centered: true,
          content: '标题为: ' + title,
          okType: 'danger',
          okText: '确认',
          cancelText: '取消',
          onOk: () => {
            deleteReq({ id })
            this.props.deleteBlog(id)
          },
          onCancel() {
            // console.log('Cancel');
          },
        })
        break;
      default:
        break;
    }
  }
}
export default One
